<template>
	<image 
		:src="currentSrc" 
		:mode="mode" 
		:style="imageStyle"
		@error="handleImageError"
		@load="handleImageLoad"
		:lazy-load="lazyLoad"
		:show-menu-by-longpress="showMenuByLongpress"
		:webp="webp"
		:cache="cache"
	/>
</template>

<script>
import { processImageUrl, getFallbackImage } from '@/utils/imageUtils.js'

export default {
	name: 'SafeImage',
	props: {
		// 图片路径
		src: {
			type: String,
			default: ''
		},
		// 图片裁剪、缩放模式
		mode: {
			type: String,
			default: 'scaleToFill'
		},
		// 图片样式
		imageStyle: {
			type: Object,
			default: () => ({})
		},
		// 是否开启懒加载
		lazyLoad: {
			type: Boolean,
			default: true
		},
		// 是否开启长按图片显示识别小程序码菜单
		showMenuByLongpress: {
			type: Boolean,
			default: false
		},
		// 是否开启webp格式
		webp: {
			type: Boolean,
			default: false
		},
		// 是否开启缓存
		cache: {
			type: Boolean,
			default: true
		},
		// 默认图片路径
		defaultSrc: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			currentSrc: '',
			hasError: false,
			retryCount: 0,
			maxRetries: 2
		}
	},
	watch: {
		src: {
			handler(newSrc) {
				this.loadImage(newSrc)
			},
			immediate: true
		}
	},
	methods: {
		/**
		 * 加载图片
		 * @param {string} src - 图片路径
		 */
		loadImage(src) {
			if (!src) {
				this.currentSrc = this.getDefaultImage()
				return
			}
			
			// 处理图片路径
			this.currentSrc = processImageUrl(src, this.defaultSrc)
			this.hasError = false
			this.retryCount = 0
		},
		
		/**
		 * 处理图片加载错误
		 */
		handleImageError() {
			console.warn('图片加载失败:', this.currentSrc)
			this.hasError = true
			
			// 如果还有重试次数，尝试使用默认图片
			if (this.retryCount < this.maxRetries) {
				this.retryCount++
				this.currentSrc = this.getDefaultImage()
			} else {
				// 超过重试次数，使用最终默认图片
				this.currentSrc = getFallbackImage(this.src)
			}
			
			// 触发错误事件
			this.$emit('error', {
				src: this.currentSrc,
				originalSrc: this.src,
				retryCount: this.retryCount
			})
		},
		
		/**
		 * 处理图片加载成功
		 */
		handleImageLoad() {
			this.hasError = false
			this.$emit('load', {
				src: this.currentSrc,
				originalSrc: this.src
			})
		},
		
		/**
		 * 获取默认图片
		 * @returns {string} 默认图片路径
		 */
		getDefaultImage() {
			if (this.defaultSrc) {
				return this.defaultSrc
			}
			return getFallbackImage(this.src)
		}
	}
}
</script>

<style scoped>
/* 可以添加一些默认样式 */
</style>
